<template>
  <div class="announcements-page">
    <div class="container">
      <h1 class="page-title">服务器公告</h1>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" v-for="(news, idx) in newsList" :key="news.id">
          <el-card class="news-card" shadow="hover" @click="viewNews(news.id)"
                   v-reveal="{ delay: 100 + idx * 80, distance: 24 }">
            <div class="news-image">
              <img :src="news.mediaUrls[0]" :alt="news.title" />
            </div>
            <div class="news-content">
              <h3>{{ news.title }}</h3>
              <p class="news-date">{{ news.date }}</p>
              <p class="news-excerpt">{{ news.content.substring(0, 120) }}...</p>
              <el-button type="primary" size="small">阅读更多</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[6, 12, 24]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="changePage"
          @current-change="changePage"
        />
      </div>
    </div>
  </div>
</template>

<script lang="js" setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import axiosInstance from '../interceptors'


const newsList = ref([])
const currentPage = ref(1)
const pageSize = ref(6)
const total = ref(0)
const pages = ref(0)

const router = useRouter()
const getNewsList = async () => {
  const res = await axiosInstance.get(`announcement/page/${currentPage.value}/size/${pageSize.value}`)
  if(res.data.code == 1){
    updatePageMessages(res)
  }
}


const updatePageMessages = (res)=>{

  console.log(res.data.data)
  res.data.data.records.forEach(item=>{
    item.mediaUrls = item.mediaUrls.replace('\\"', '/')
    console.log(item.mediaUrls)
    item.mediaUrls = JSON.parse(item.mediaUrls)
    
  })
  console.log(res.data.data.records)
  newsList.value = res.data.data.records
  total.value = res.data.data.total
  pages.value = res.data.data.pages
  currentPage.value = res.data.data.current
  pageSize.value = res.data.data.size
}

// 分页组件事件触发时重新加载
const changePage = () => {
  getNewsList()
}

  
onMounted(() => {
  getNewsList()
})
    


</script>

<style scoped>
.announcements-page {
  padding: 20px 0;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  color: #4CAF50;
}

.news-card {
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
  margin-bottom: 20px;
}

.news-card:hover {
  transform: translateY(-5px);
}

.news-image {
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.news-card:hover .news-image img {
  transform: scale(1.1);
}

.news-content h3 {
  color: #4CAF50;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.news-date {
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.news-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .news-card {
    margin-bottom: 15px;
  }
}
</style> 